<template>
    <view>
        <!-- <u-notice-bar text="关闭本页面将自动保存未提交的表单,下次打开此页面自动恢复内容." icon="-"></u-notice-bar> -->


        <!-- 凭据信息表单 -->
        <view class="cell-1">
            <!-- <view class="tit-1">
                车辆凭据
            </view> -->
            <view class="content-1">
                <view class="form-section">
                    <u-form>
                        <u-form-item label="磅单图片">
                            <u-upload :fileList="formData.picsModel" @afterRead="afterReadCert" @delete="deleteCert"
                                name="pics" :disabled="haveUnload" multiple :maxCount="5"></u-upload>
                        </u-form-item>

                        <!-- 货品集合 -->
                        <u-form-item label="货品">
                            <view v-for="(prod, index) in formData.prods" :key="index" class="prod-input-box">
                                <view style="display: flex;">
                                    <view class="prod-input-box-label">货品：</view>
                                    <u-input :customStyle="customFirstInputStyle" v-model="prod.prodName" readonly
                                        disabled></u-input>
                                </view>
                                <view style="display: flex;">
                                    <view class="prod-input-box-label">计费：</view>
                                    <!-- <u-input v-model="prod.prodWeight" type="number" placeholder="点击此处选择">
                                        <u-text :text="prod.prodUnit" slot="suffix" margin="0 3px 0 0"
                                            type="tips"></u-text>
                                    </u-input> -->
                                    <picker @change="bindPickerChange($event, index)" :disabled="haveUnload"
                                        :value="prod.selectedRuleIndex || 0" :range="formatRules(prod.priceRules)">
                                        <view class="uni-input" style="line-height: 28px;font-size: 14px;">
                                            {{ prod.priceRules[(prod.selectedRuleIndex || 0)].key }}
                                            (￥{{ prod.priceRules[(prod.selectedRuleIndex || 0)].value/100 }}/{{prod.prodUnit}})
                                        </view>
                                    </picker>
                                </view>
                                <view style="display: flex;">
                                    <view class="prod-input-box-label">数量：</view>
                                    <view style="width: 50%;">
                                        <u-input v-model="prod.prodCount" type='digit' placeholder="输入货物数量"
                                            :disabled="haveUnload">
                                            <u-text :text="prod.prodUnit" slot="suffix" margin="0 3px 0 0"
                                                type="tips"></u-text>
                                        </u-input>
                                    </view>
                                </view>
                            </view>

                            <view class="plate-selection">
                                <view v-for="(prod, prodIndex) in item.prods" :key="itemIndex" class="product-info">
                                    <u--image :showLoading="true" :src="prod.image" width="70px" height="70px"
                                        @click="click"></u--image>
                                    <view class="product-details">
                                        <view class="product-name">{{ prod.prodName }}</view>
                                        <view class="product-description">档口：{{ order.areaStall }}</view>
                                        <view class="product-price">司机电话：{{ order.driPhone }}</view>
                                    </view>
                                </view>
                                <view class="plate-button plate-add-btn" @click="addProdModel = true"
                                    v-if="!haveUnload">
                                    选择货物
                                </view>
                            </view>
                        </u-form-item>

                        <!-- 订单额外费用 -->
                        <u-form-item label="垫付金额">
                            <u-input v-model="formData.otherPayModel" @change="handleOtherPay" type='digit'
                                placeholder="请输入金额(元)" :disabled="haveUnload">
                                <u-text text="￥" slot="suffix" margin="0 3px 0 0" type="tips"></u-text>
                            </u-input>
                        </u-form-item>
                    </u-form>
                </view>
            </view>

            <text style="padding-right: 5px;display: block;text-align: right;">
                <!-- 共{{ this.formData.prods.length }}类货品， -->
                共
                <text style="color: red;">
                    {{ calcSumWeight(this.formData.prods) }}
                </text>
                吨，合计金额
                <text style="color: red;">
                    ¥{{ formatMoney(calcSumPrice(this.formData.prods, this.formData.otherPay)) }}
                </text>
            </text>
            <u-button class="u-reset-button" @click="this.haveUnload?null:this.submit()"
                :disabled="haveUnload">{{ haveUnload?'已':'' }}提交</u-button>
        </view>

        <!-- <TrailerKeyboard :show.sync="addProdModel" :vehicleNo="newProd" @confirm="addProd" vehicleType="car">
        </TrailerKeyboard> -->
        <u-popup :show="addProdModel" mode="bottom" @close="close" @open="">
            <view class="allocation-info">
                <u-icon name="close" size="24" class="close-icon" @click="close"></u-icon>
                <view class="title">选择货品</view>

                <view v-if="order" class="order-item">
                    <view class="i-top b-b">
                        <text class="time">当前订单</text>
                    </view>
                    <view v-for="(prod, prodIndex) in order.prods" :key="prodIndex" @click="selectProd(prod)"
                        :class="['product-info' ,'product-button', { active: selectedIds.includes(prod.prodId) }]">
                        <u--image :showLoading="true" :src="prod.image" width="70px" height="70px"></u--image>
                        <view class="product-details">
                            <view class="product-name">{{ prod.prodName }}</view>
                            <view class="product-description">档口：{{ order.stallNum || '无' }}</view>
                            <view class="product-price">司机电话：{{ order.senderPhone || '无' }}</view>
                        </view>
                    </view>
                </view>
            </view>
            <button class="u-reset-button" style="
                                                width: 83%;
                                                height: 37px;
                                                line-height: 37px;
                                                margin-bottom: 20vh;
                                                transform: translateY(15px);
                                                background-color: #0095ff;
           " @click="this.addProdModel = false" type="primary">确定</button>
        </u-popup>

        <!-- <u-modal :show="pageBackModel" title="保存凭证" content='检测到您还有未提交的信息,是否临时保存此页面,下次打开将恢复未提交的数据' showCancelButton
            @confirm="savePageBack(1)" @cancel="savePageBack(0)">
            <u-button slot="confirmButton" text="确定" type="success" shape="square" @click="show8 = false">
            </u-button>
        </u-modal> -->
        <u-modal :show="plateClearModel" title="清空车辆" content='是否要清空已填写的全部车辆？' showCancelButton @confirm="plateClear"
            @cancel="plateClearModel = false">
        </u-modal>
    </view>
</template>

<script>
    import TrailerKeyboard from "@/components/car-board/carBoard.vue";
    import {
        imageApi,
        orderApi
    } from '@/api';
    import {
        User
    } from "../../utils";
    export default {
        data() {
            return {
                userInfo: User.get(),
                datetimePicker: false,
                save_timer: null,
                orderId: 0,
                pageBackModel: false,
                plateClearModel: false,
                plates: [], // 初始车牌号列表
                selectedProd: '', // 当前选择的车牌号
                addProdModel: false,
                newProd: '', // 新车牌输入框
                otherPay: 0, // 额外费用
                currFormIndex: -1,
                selectedIds: [],
                haveUnload: false,
                customFirstInputStyle: {
                    border: 'none',
                },
                formData: {
                    groupId: 0,
                    orderId: 0,
                    otherPay: 0,
                    otherPayModel: 0,
                    picsModel: [],
                    pics: [],
                    prods: []
                },
                prodTemplate: {
                    orderId: "",
                    prodId: 0,
                    prodName: "",
                    prodPrice: 0,
                    prodCount: 0,
                    prodUnit: "",
                    carNums: 0,
                    mayAmount: 0,
                    priceRule: ''
                },
                order: {}
            };
        },
        components: {
            TrailerKeyboard
        },
        methods: {
            selectProd(prod, index = -1) {
                if (this.selectedIds.includes(prod.prodId)) {
                    this.selectedIds = this.selectedIds.filter(id => id !== prod.prodId);
                    this.formData.prods = this.formData.prods.filter(p => p.prodId !== prod.prodId)
                } else {
                    this.selectedIds.push(prod.prodId);
                    this.formData.prods.push({
                        ...prod
                    });
                }
                console.log(this.formData.prods);
            },


            formatMoney(price) {
                if (price == null || price === '') {
                    return 'N/A';
                }

                // 将价格转换为以“元”为单位的小数
                const formattedPrice = (parseInt(price) / 100).toFixed(2);

                // 使用正则表达式添加千分位逗号
                return formattedPrice.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
            },

            calcSumPrice(prods, extra = 0) {
                let sum = 0;
                for (let prod of prods) {
                    let aSum = prod.priceRules[prod.selectedRuleIndex || 0].value * prod.prodCount;
                    sum += aSum;
                }
                return sum + extra;
            },

            calcSumWeight(prods) {
                let sum = 0;
                for (let prod of prods) {
                    let aSum = prod.prodUnitWeight * prod.prodCount;
                    sum += aSum;
                }
                return sum / 1000000;
            },

            addProd(plateInput) {
                if (plateInput) {
                    this.plates.push(plateInput);
                    const now = new Date();

                    // 深拷贝 this.formDataTemplate 并赋值给新的对象
                    const newFormData = JSON.parse(JSON.stringify(this.formDataTemplate));

                    // 设置新的对象的 trunkLicense 属性
                    newFormData.trunkLicense = plateInput;
                    newFormData.accessTime = this.formatDate(now);
                    newFormData.accessTimestamp = now.getTime();

                    // 将新的对象推入 formData 数组
                    this.formData.push(newFormData);

                    // 调用 selectProd 方法，传入 plateInput 参数
                    this.selectProd(plateInput);

                    console.log(this.formData);
                }
            },

            datetimeFormatter(type, value) {
                if (type === 'year') {
                    return `${value}年`
                }
                if (type === 'month') {
                    return `${value}月`
                }
                if (type === 'day') {
                    return `${value}日`
                }
                if (type === 'hour') {
                    return `${value}时`
                }
                if (type === 'minute') {
                    return `${value}分`
                }
                return value
            },
            datetimeConfirm(e) {
                const timeFormat = uni.$u.timeFormat;
                const timeFormated = timeFormat(e.value, 'yyyy-mm-dd hh:MM');
                console.log(timeFormated)
                this.formData.accessTime = timeFormated;
                this.datetimePicker = false;
            },
            formatDate(date) {
                // 格式化日期为 'yyyy-mm-dd hh:MM'
                const year = date.getFullYear();
                const month = String(date.getMonth() + 1).padStart(2, '0');
                const day = String(date.getDate()).padStart(2, '0');
                const hours = String(date.getHours()).padStart(2, '0');
                const minutes = String(date.getMinutes()).padStart(2, '0');

                return `${year}-${month}-${day} ${hours}:${minutes}`;
            },
            parseDateTime(datetimeStr) {
                // 使用正则表达式解析日期和时间部分
                const [datePart, timePart] = datetimeStr.split(' ');
                const [year, month, day] = datePart.split('-').map(Number);
                const [hours, minutes] = timePart.split(':').map(Number);

                // 创建 Date 对象，月份需要减 1 因为 JavaScript 的月份是从 0 开始的
                const date = new Date(year, month - 1, day, hours, minutes);

                // 返回时间戳
                return date.getTime();
            },

            afterReadCert(event) {
                this.handleUpload(event, 'pics');
            },
            deleteCert(event) {
                this.formData.pics.splice(event.index, 1);
                this.formData.picsModel.splice(event.index, 1);
            },
            handleOtherPay() {
                this.formData.otherPay = this.formData.otherPayModel * 100
            },
            async handleUpload(event, listName) {
                const files = [].concat(event.file);
                for (const file of files) {
                    const result = await imageApi.upload(file.url);
                    this.formData[listName].push(result.data);
                    this.formData['picsModel'].push({
                        ...file,
                        status: 'success',
                        url: result.data,
                    });
                }
            },
            convertToGrams(field) {
                // if (this.formData[field] !== null) {
                //     this.formData[field] = parseFloat(this.formData[field]) *
                //         1000;
                // }
            },

            convertProdWeight(index) {
                // const prod = this.formData.prods[index];
                // if (prod.prodWeight !== null) {
                //     prod.prodWeight = parseFloat(prod.prodWeight) * 1000;
                // }
            },

            plateClear() {
                this.plates = [];
                this.selectedProd = '';
                this.otherPay = 0;
                this.currFormIndex = -1;
                this.formData = [];

                this.plateClearModel = false;
            },

            async fetchOrder(orderId) {
                uni.showLoading({
                    title: '请稍候',
                    mask: true
                })
                const {
                    code,
                    data
                } = await orderApi.getOrderById(orderId);
                uni.hideLoading();
                if (code == 200) {
                    this.order = {
                        ...data,
                        prods: data.prods.map(item => ({
                            ...item,
                            priceRules: this.parsePriceRules(item.priceRules, item.prodPrice),
                        }))
                    };
                    this.fetchUnloadOrder();
                }
            },

            async fetchUnloadOrder() {
                uni.showLoading({
                    title: '请稍候',
                    mask: true
                })
                const {
                    code,
                    data
                } = await orderApi.listOrderUnload(this.orderId);
                uni.hideLoading();
                if (code == 200) {
                    if (data) {
                        console.log("此订单已提交卸货单")
                        this.haveUnload = true;
                    }
                }
            },

            savePageBack() {
                // if (this.formData.length == 0) {
                //     this.delPageBack();
                //     return;
                // }
                const formTemp = {
                    orderId: this.orderId,
                    pageBackModel: this.pageBackModel,
                    plates: this.plates, // 初始车牌号列表
                    selectedProd: this.selectedProd, // 当前选择的车牌号
                    addProdModel: this.addProdModel,
                    selectedIds: this.selectedIds,
                    newProd: this.newProd, // 新车牌输入框
                    otherPay: this.otherPay, // 额外费用
                    currFormIndex: this.currFormIndex,
                    formData: this.formData,
                    formDataTemplate: this.formDataTemplate,
                    order: this.order
                }
                uni.setStorageSync(`formData-${this.orderId}`, formTemp)
            },

            getPageBack() {
                const fromTemp = uni.getStorageSync(`formData-${this.orderId}`)
                console.log(fromTemp)
                if (fromTemp) {
                    this.orderId = fromTemp.orderId,
                        this.pageBackModel = fromTemp.pageBackModel,
                        this.plates = fromTemp.plates,
                        this.selectedProd = fromTemp.selectedProd,
                        this.addProdModel = fromTemp.addProdModel,
                        this.newProd = fromTemp.newProd,
                        this.selectedIds = fromTemp.selectedIds,
                        this.otherPay = fromTemp.otherPay,
                        this.currFormIndex = fromTemp.currFormIndex,
                        this.formData = fromTemp.formData,
                        // this.formData.prods = this.parsePriceRules(this.formData.prods, this.formData.prodPrice),
                        this.formDataTemplate = fromTemp.formDataTemplate,
                        this.order = fromTemp.order
                }
            },

            delPageBack() {
                uni.removeStorageSync(`formData-${this.orderId}`)
            },

            close() {
                this.addProdModel = false;
            },

            bindPickerChange: function(event, itemIndex) {
                console.log(itemIndex)
                const selectedRuleIndex = event.detail.value;
                console.log('picker发送选择改变，携带值为', selectedRuleIndex);
                if (typeof itemIndex !== 'undefined') {
                    this.$set(this.formData.prods[itemIndex], 'selectedRuleIndex', selectedRuleIndex);
                }
            },
            formatRules(rules) {
                return rules.map(rule => `${rule.key}(${rule.value/100}元)`)
            },
            parsePriceRules(priceRulesString, prodPrice) {
                if (!priceRulesString) {
                    return [{
                        key: '常规',
                        value: prodPrice
                    }];
                }

                try {
                    // 如果字符串不是以 '[' 开头，给它加上中括号
                    if (!priceRulesString.trim().startsWith('[')) {
                        priceRulesString = `[${priceRulesString}]`;
                    }
                    return JSON.parse(priceRulesString);
                } catch (e) {
                    console.error('解析 priceRules 字符串时出错', e);
                    return [];
                }
            },


            async submit() {
                this.formData.prods.map(prod => {
                    prod.mayAmount = prod.priceRules[(prod.selectedRuleIndex || 0)].value * prod.prodCount;
                    prod.priceRule = JSON.stringify(prod.priceRules[(prod.selectedRuleIndex || 0)]);
                    prod.prodWeight = prod.prodCount * prod.prodUnitWeight;
                    prod.carNums = 1;
                })

                // const formDataReq = {
                //     ...FormData,
                //     prods: [{
                //         ...prod,

                //     }]
                // }
                console.log("提交卸货单：---------------------------------------")
                console.log(this.formData)
                console.log("---------------------------------------")
                uni.showLoading({
                    title: '请稍后'
                })
                const {
                    code,
                    data,
                    message
                } = await orderApi.unloadOrder(this.formData)
                if (code == 200) {
                    uni.showToast({
                        title: '上传成功'
                    })
                    this.haveUnload = true
                    uni.navigateBack()
                } else {
                    uni.showToast({
                        icon: 'error',
                        title: message
                    })
                }
                uni.hideLoading();

            }
        },
        onLoad(option) {
            this.fetchOrder(option.orderId);
            this.orderId = option.orderId
            this.formData['orderId'] = option.orderId
            this.getPageBack();
        },
        onUnload() {
            clearInterval(this.save_timer);
            this.savePageBack();
            // this.pageBackModel = true;
            return;
        },
        onReady() {
            // this.$refs.datetimePicker.setFormatter(this.datetimeFormatter)
        },
        mounted() {
            this.save_timer = setInterval(() => {
                this.savePageBack();
            }, 1000)
            this.formData.groupId = this.userInfo.groupId;
        }
    };
</script>

<style lang="scss">
    .order-item {
        display: flex;
        flex-direction: column;
        padding-left: 30upx;
        background: #fff;
        margin-top: 16upx;

        .i-top {
            display: flex;
            align-items: center;
            height: 80upx;
            padding-right: 30upx;
            font-size: $font-base;
            color: $font-color-dark;
            position: relative;

            .time {
                flex: 1;
            }

            .state {
                color: $base-color;
            }

            .del-btn {
                padding: 10upx 0 10upx 36upx;
                font-size: $font-lg;
                color: $font-color-light;
                position: relative;

                &:after {
                    content: '';
                    width: 0;
                    height: 30upx;
                    border-left: 1px solid $border-color-dark;
                    position: absolute;
                    left: 20upx;
                    top: 50%;
                    transform: translateY(-50%);
                }
            }
        }



        /* 单条商品 */
        .goods-box-single {
            display: flex;
            padding: 20upx 0;

            .goods-img {
                display: block;
                width: 120upx;
                height: 120upx;
            }

            .right {
                flex: 1;
                display: flex;
                flex-direction: column;
                padding: 0 30upx 0 24upx;
                overflow: hidden;

                .title {
                    font-size: $font-base + 2upx;
                    color: $font-color-dark;
                    line-height: 1;
                }

                .attr-box {
                    font-size: $font-sm + 2upx;
                    color: $font-color-light;
                    padding: 10upx 12upx;
                }

                .price {
                    font-size: $font-base + 2upx;
                    color: $font-color-dark;

                    &:before {
                        content: '￥';
                        font-size: $font-sm;
                        margin: 0 2upx 0 8upx;
                    }
                }
            }
        }

        .price-box {
            display: flex;
            justify-content: flex-end;
            align-items: baseline;
            padding: 20upx 30upx;
            font-size: $font-sm + 2upx;
            color: $font-color-light;

            .num {
                margin: 0 8upx;
                color: $font-color-dark;
            }

            .price {
                font-size: $font-lg;
                color: $font-color-dark;

                &:before {
                    content: '￥';
                    font-size: $font-sm;
                    margin: 0 2upx 0 8upx;
                }
            }
        }

        .action-box {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            height: 100upx;
            position: relative;
            padding-right: 30upx;
        }

        .action-btn {
            height: 60upx;
            width: 190rpx;
            margin: 0;
            margin-left: 24upx;
            padding: 0;
            text-align: center;
            line-height: 60upx;
            font-size: $font-sm + 2upx;
            color: $font-color-dark;
            background: #fff;
            border-radius: 100px;

            &:after {
                border-radius: 100px;
            }

            &.recom {
                background: #fff9f9;
                color: $base-color;

                &:after {
                    border-color: #f7bcc8;
                }
            }


            &.upload-btn {
                margin-right: 24px;

                &.recom {
                    background: #f9fbff;
                    color: #037fff;
                }

                &:after {
                    border-color: #a0beff;
                }
            }
        }
    }

    .plate-selection {
        display: flex;
        flex-flow: wrap;
        margin-bottom: 16upx;
    }

    .plate-button {
        padding: 8upx 16upx;
        margin: 5px;
        border: 1upx solid #d9a1a1;
        border-radius: 4upx;
        cursor: pointer;
        background-color: #ffe6e6;
    }

    .plate-button.plate-add-btn {
        width: 100%;
        text-align: center;
        margin: 7px;
        border-radius: 8px;
        background: #39acffcc;
        border: none;
        color: #fff;
    }

    .product-button.active {
        // background-color: #e66973;
        // color: white;
        border: 2px #0898ff9e solid;
        background: #0898ff1a;
        border-radius: 5px;
    }

    .form-section {


        .u-form-item__body {
            flex-direction: column !important;
            align-items: flex-start !important;
        }

        .u-form-item__body__left {
            width: 190rpx !important;
            padding-left: 5px;
            // background: #ffe7e79c;
            // border: solid 1px #FBDBE1;
            border-right: 0;

            text {
                text-align-last: justify !important;
                display: inline !important;
                color: #565656 !important;
                font-size: 20px !important;
            }
        }

        .u-form-item__body__right {
            // border-radius: 8px;
            width: 100%;
            background: #f4f5f724;
            padding-bottom: 12px;
            border-bottom: #ddd 2px solid;

            text {
                // text-align-last: justify !important;
                display: inline !important;
            }

            .u-picker__view__column {
                text {
                    // text-align-last: center !important;
                    display: block !important;
                }
            }

            .prod-input-box {
                margin: 7px;
                border-radius: 8px;
                background: #F4F5F7;
                border: 1px #a6a6a6 dashed;

                .prod-input-box-label {
                    padding: 9px 9px 6px 9px;
                    font-weight: 600;
                }

                .u-input {
                    margin-top: 6px;
                    margin-bottom: 10px;
                    /* padding-bottom: 6px; */
                    padding-left: 9px;
                    /* padding-right: 9px; */
                    // background: #fff;
                    height: 27px;
                    border-radius: 0;
                    border-bottom: 1px #929292 solid;
                }

                .u-input__content__subfix-icon {
                    font-size: 17px !important;
                }

                input {
                    font-size: 17px !important;
                }

                .uni-input {
                    font-size: 17px !important;
                }
            }
        }

    }

    .u-upload__button {
        margin: 8px 0 8px 8px !important;
    }

    .u-upload__wrap__preview {
        margin: 8px 0 8px 8px !important;
    }

    .u-notice-bar {
        background-color: #f1f1f1 !important;
    }

    .u-notice__content__text {
        text {
            color: #757575 !important;
        }
    }

    .u-notice__left-icon {
        display: none !important;
    }

    .cell-1 {
        margin: 50rpx 40rpx 0 40rpx;
        // border-left: #ffb9bc 5px solid;
        // background: #ffffff;

        >.u-button {
            background-color: #0898FF !important;
            border-radius: 8px !important;
            color: #fff !important;
            font-size: 26px !important;
            font-weight: 600 !important;
            width: 86vw !important;
        }

        .u-form-item__body__left__content__label {
            font-size: 19px !important;
            font-weight: 600 !important;
        }

        .u-form-item__body__right__content__slot {
            font-size: 16px !important;

            picker {
                margin-top: 6px;
                margin-bottom: 10px;
                // padding-bottom: 6px;
                padding-left: 9px;
                padding-right: 9px;
                // width: 74.8%;
                // background: #fff;
                border-bottom: #929292 1px solid;
                border-radius: 0;
                height: 25px;
            }

            input {
                font-size: 17px !important;
            }
        }

        .tit-1 {
            margin: 10rpx 0 0 5px;
            padding-top: 10rpx;
            color: #b5b5b5;
            font-size: 24px;
            font-weight: 600;

            .del-btn {
                padding: 10upx 0 10upx 36upx;
                font-size: $font-lg;
                color: $font-color-light;
                position: relative;

                &:after {
                    content: '';
                    width: 0;
                    height: 30upx;
                    border-left: 1px solid $border-color-dark;
                    position: absolute;
                    left: 20upx;
                    top: 50%;
                    transform: translateY(-50%);
                }
            }
        }

        .content-1 {
            padding: 5px;
        }
    }


    /* Product Info */
    .product-info {
        display: flex;
        margin-top: 10px;
        border: 2px transparent solid;
        border-radius: 5px;
    }

    .product-image {
        width: 80px;
        height: 80px;
        margin-right: 10px;
    }

    .product-details {
        margin-left: 10px;
        line-height: 30rpx;
        flex: 1;
    }

    .product-name {
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        font-weight: bold;
        margin-top: 5px;
        margin-bottom: 10px;
    }

    .product-description {
        color: #888;
        margin-top: 5px;
    }

    .product-price {
        color: #ff4d4f;
        margin-top: 5px;
    }


    .assign-button {
        width: 150rpx;
    }


    .allocation-info {
        min-height: 65vh;
        max-height: 80vh;
        overflow: scroll;
        margin-top: 30px;
        padding: 20px;

        .title {
            font-size: 20px;
            margin-bottom: 15px;
        }

        .info-item {
            margin-top: 35px;
            display: flex;

            .info-item-tip {
                font-size: 14px;
                width: 100px;
                padding-left: 30rpx;
            }

            .info-item-content {
                font-size: 14px;
                font-weight: 700;
                width: 74%;
            }
        }

        >.u-icon {
            flex-direction: row-reverse !important;
        }
    }
</style>